<style lang="less">
  .f-w70{
    width: 70% !important;
  }
  .f-c-red{
    color: red;
  }
  .f-c-green{
    color: green;
  }
  .my-toolbar {
    background: #f2f2f2;
    padding: 10px;
    overflow: hidden;
    margin: 0px 0px 10px 0px;
    .el-form-item{
      margin-bottom: 5px;
    }
  }
</style>
<template>
  <section>
    <el-col :span="24" class="my-toolbar"  style="background-color: #FFE4B5">
      <el-form>
        <el-row>
          <el-col v-if="isShowBack" :span="2" >
            <el-button type="text" @click="backClick" style="font-size: 18px"> &lt; 返回</el-button>
          </el-col>
          <el-col :span="8">
            <div style="font-size: 18px;padding: 5px">
              <label>专线名称:</label>
              <label style="font-weight: 600;padding-left: 10px"> {{specialIncomeInfo.specialOrgName}} </label>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="font-size: 18px;padding: 5px">
              <label>收益总额:</label>
              <label style="font-weight: 600;padding-left: 10px"> <span>{{specialIncomeInfo.totalIncome}}</span>  元</label>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="font-size: 18px;padding: 5px">
              <label>已销账总额:</label>
              <label style="font-weight: 600;padding-left: 10px"> <span>{{specialIncomeInfo.totalExtractIncome}}</span> 元</label>
            </div>
          </el-col>
          <el-col :span="4">
            <div style="font-size: 18px;padding: 5px">
              <label>剩余总额:</label>
              <label style="font-weight: 600;padding-left: 10px"> <span>{{specialIncomeInfo.totalSurplusIncome}}</span> 元</label>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24" class="my-toolbar">
      <el-form ref="searchForm" :model="searchForm" label-position="right" label-width="120px">
        <el-row>
          <el-col :span="8">
              <el-form-item label="订单编号">
                <el-input v-model="searchForm.orderNumber" class="f-w70" placeholder="请输入订单编号"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
              <el-form-item label="客户名称">
                <el-input v-model="searchForm.memberUserName" class="f-w70" placeholder="请输入客户名称"></el-input>
              </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="下单日期">
              <el-date-picker class="f-w70" v-model="searchForm.submitTime" type="daterange" placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发运日期">
              <el-date-picker class="f-w70" v-model="searchForm.shipmentsDate" type="daterange" placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="发车日期">
              <el-date-picker class="f-w70"  :disabled="true" v-model="searchForm.departDate"  type="daterange" placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="签收日期">
              <el-date-picker class="f-w70" v-model="searchForm.signOffDate" type="daterange" placeholder="选择日期范围">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="发货人" prop="LIKE_shipmentsContactName">
              <el-input v-model="searchForm.shipmentsContactName" class="f-w70" placeholder="请输入发货人姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="f-mb" label="订单状态">
              <el-select v-model="searchForm.orderStatus" class="f-w70"
                         placeholder="请选择状态">
                <el-option
                  v-for="item in $store.getters.ORDER_STATUS"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item class="f-mb" label="支付状态">
              <el-select v-model="searchForm.payStatus" class="f-w70"
                         placeholder="请选择状态">
                <el-option
                  v-for="item in $store.getters.ORDER_PAY_STATUS"
                  :key="item.dictVal"
                  :label="item.cnDictValname"
                  :value="item.dictVal">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-col>
    <el-col :span="24" style="margin-bottom: 10px">
      <el-button type="primary" @click="exportToExcel">导出</el-button>
      <el-button type="primary" @click="reset" style="float: right">重置</el-button>
      <el-button type="primary" @click="findSpecialIncomeDetailList" style="float: right;margin-right: 10px">查询</el-button>
    </el-col>
    <el-table v-loading="extractListLoading" ref="multipleTable" max-height="520"
      :data="tableData" border tooltip-effect="dark" style="width: 100% ;margin-top: 10px">
      <el-table-column type="selection" width="55" align="center">
      </el-table-column>
      <el-table-column prop="order.orderNumber" label="订单编号" width="150" align="center">
        <template slot-scope="scope">
          <a style="cursor: pointer;text-decoration:underline;color: #20a0ff" @click="orderSelectDialog(scope.row.order)">
            {{scope.row.order.orderNumber}}
          </a>
        </template>
      </el-table-column>
      <el-table-column prop="shipInfo" label="日期" width="240" headeer-align="center">
        <template slot-scope="scope">
          下单日期 {{scope.row.order.submitTime}}<br>
          发运日期 {{scope.row.order.shipmentsDate}}<br>
          发车日期 {{scope.row.departDate}}<br>
          签收日期 {{scope.row.signOffDate}}<br>
        </template>
      </el-table-column>
      <el-table-column prop="order.memberUserName" label="客户名称" width="100" align="center">
      </el-table-column>
      <el-table-column label="订单金额(元)" width="120" header-align="center">
        <template slot-scope="scope">
          <span>{{scope.row.order.agingName}}</span><br>
          <span>{{scope.row.order.orderPrice}}</span><br>
          <span v-if="scope.row.order.payStatus == 101003001" style="color: red">{{scope.row.order.payStatusName}}</span>
          <span v-else style="color: green">{{scope.row.order.payStatusName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="运费信息" width="150" header-align="center">
        <template slot-scope="scope">
          标准单价:{{scope.row.standardUnitPrice}}<br>
          干线费:{{scope.row.trunkPrice}}<br>
          提货费:{{scope.row.pickPrice}}<br>
          送货费:{{scope.row.deliveryPrice}}
        </template>
      </el-table-column>
      <el-table-column prop="income" label="收益金额(元)" width="120" align="center">
      </el-table-column>
      <el-table-column prop="order.paymentTypeName" label="结算方式" width="100" align="center"></el-table-column>
      <el-table-column prop="order.orderStatusName" label="订单状态" width="100" align="center"></el-table-column>
      <el-table-column prop="shipInfo" label="发货信息" width="200px" header-align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.order.shipmentsContactName !== null || scope.row.order.shipmentsContactName !== '' || scope.row.order.shipmentsContactName !== undefined">
            {{scope.row.order.shipmentsContactName}} {{scope.row.order.shipmentsContactPhone}}<br>
          </label>
          <label v-if="scope.row.order.shipmentsAddress !== null || scope.row.order.shipmentsAddress !== '' || scope.row.order.shipmentsAddress !== undefined">
            {{scope.row.order.shipmentsAddress}}
          </label>
        </template>
      </el-table-column>
      <el-table-column prop="receiptInfo" label="收货信息" width="200px" header-align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.order.sendContactName !== null || scope.row.order.sendContactName !== '' || scope.row.order.sendContactName !== undefined">
            {{scope.row.order.sendContactName}} {{scope.row.order.sendContactPhone}}<br>
          </label>
          <label v-if="scope.row.order.sendAddress !== null || scope.row.order.sendAddress !== '' || scope.row.order.sendAddress !== undefined">
            {{scope.row.order.sendAddress}}
          </label>
        </template>
      </el-table-column>
      <el-table-column label="货物信息" style="width: 20%;" header-align="center">
        <template slot-scope="scope">
          <label v-if="scope.row.order.cargoNames !== null || scope.row.order.cargoNames !== '' || scope.row.order.cargoNames !== undefined">
            {{scope.row.order.cargoNames}}<br>
          </label>
          <label v-if="scope.row.order.amount !== null || scope.row.order.amount !== '' || scope.row.order.amount !== undefined">
            {{scope.row.order.amount}}件<br>
          </label>
          <label v-if="scope.row.order.weight !== null || scope.row.order.weight !== '' || scope.row.order.weight !== undefined">
            {{scope.row.order.weight}}吨<br>
          </label>
          <label v-if="scope.row.order.volume !== null || scope.row.order.volume !== '' || scope.row.order.volume !== undefined">
            {{scope.row.order.volume}}方<br>
          </label>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
                   :current-page="currentPage"
                   :page-size="pageSize"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   layout="total,sizes,prev, pager, next, jumper"
                   :total="total" style="float: right;margin-bottom: 20px">
    </el-pagination>

    <!--订单查看Dialog-->
    <el-dialog title="订单查看" :visible.sync="orderSelect" width="80%">
      <order-select :title="orderSelectForm"></order-select>
    </el-dialog>
  </section>
</template>

<script>
import {searchSpecialIncomeDetails, searchSumSingle} from '../../api/stowage/SpecialIncome.js';
import {resetObjNull, isEmpty} from '../../lib/util.js';
import OrderSelect from '../order/OrderSelectDialog.vue';

export default {
  components: {
    'order-select': OrderSelect
  },
  data () {
    return {
      // 顶部信息
      isShowBack: false, // 是否是专线统计-是-显示返回上一页按钮
      listLoading: false,
      specialIncomeInfo: {
        specialIncomeId: '',
        specialOrgId: '',
        specialOrgName: '',
        totalIncome: 0,
        totalExtractIncome: 0,
        totalSurplusIncome: 0
      },
      extractListLoading: false,
      searchForm: {
        orderNumber: null,
        memberUserName: null,
        shipmentsContactName: null,
        orderStatus: null,
        payStatus: null,
        submitTime: [],
        shipmentsDate: [],
        departDate: [],
        signOffDate: []
      },
      sels: [],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      sortProp: 'modifyDate',
      sortOrder: 'descending',
      tableData: [],
      orderSelect: false,
      orderSelectForm: {}
    };
  },
  watch: {},
  methods: {
    exportToExcel () {
      location.href = '/api/v2.0/admin/special_income_detail/export?specialIncomeId=' + this.specialIncomeInfo.specialIncomeId + '&filters=' + this.toFilter();
    },
    // 返回收益汇总页面
    backClick () {
      this.$router.push('/settlement_platform/specialIncome');
    },
    init () {
      let specialIncomeId = this.$route.params.id;
      if (!isEmpty(specialIncomeId)) {
        this.isShowBack = true;
        this.specialIncomeInfo.specialIncomeId = specialIncomeId;
      } else {
        this.specialIncomeInfo.specialIncomeId = null;
      }
      this.searchSumSingleSpecialIncome();
    },
    // 每页几条操作
    handleSizeChange (val) {
      this.pageSize = val;
      this.findSpecialIncomeDetailList();
    },
    // 第几页操作
    handleCurrentChange (val) {
      this.currentPage = val;
      this.findSpecialIncomeDetailList();
    },
    // filters
    toFilter () {
      let filters = 'EQ_specialIncome.id=' + this.specialIncomeInfo.specialIncomeId + ';EQ_effective=true;';
      let sf = this.searchForm;
      for (let s in sf) {
        if (sf[s] == null || sf[s] === undefined || sf[s] === '') { continue; }
        if (s === 'submitTime' && sf[s] && sf[s][0]) {
          let startDate = (sf[s][0]).Format('yyyy-MM-dd');
          let endDate = (sf[s][1]).Format('yyyy-MM-dd');
          filters += 'GTE_order.' + s + '=' + startDate + ';LTE_order.' + s + '=' + endDate + ';';
          continue;
        };
        if (s === 'shipmentsDate' && sf[s] && sf[s][0]) {
          let startDate = (sf[s][0]).Format('yyyy-MM-dd');
          let endDate = (sf[s][1]).Format('yyyy-MM-dd');
          filters += 'GTE_order.' + s + '=' + startDate + ';LTE_order.' + s + '=' + endDate + ';';
          continue;
        };
        if (s === 'departTime' && sf[s] && sf[s][0]) {
          let startDate = (sf[s][0]).Format('yyyy-MM-dd');
          let endDate = (sf[s][1]).Format('yyyy-MM-dd');
          filters += 'GTE_' + s + '=' + startDate + ';LTE_' + s + '=' + endDate + ';';
          continue;
        };
        if (s === 'signOffDate' && sf[s] && sf[s][0]) {
          let startDate = (sf[s][0]).Format('yyyy-MM-dd');
          let endDate = (sf[s][1]).Format('yyyy-MM-dd');
          filters += 'GTE_order.signOff.' + s + '=' + startDate + ';LTE_order.signOff.' + s + '=' + endDate + ';';
          continue;
        };
        if (s === 'orderNumber') {
          filters += 'LIKE_order.orderNumber=' + sf[s] + ';';
          continue;
        };
        if (s === 'memberUserName') {
          filters += 'LIKE_order.memberUserName=' + sf[s] + ';';
          continue;
        };
        if (s === 'shipmentsContactName') {
          filters += 'LIKE_order.shipmentsContactName=' + sf[s] + ';';
          continue;
        };
        if (s === 'orderStatus') {
          filters += 'EQ_order.orderStatus=' + sf[s] + ';';
          continue;
        };
        if (s === 'payStatus') {
          filters += 'EQ_order.payStatus=' + sf[s] + ';';
          continue;
        };
      };
      return filters;
    },
    findSpecialIncomeDetailList () {
      let filters = this.toFilter();
      this.extractListLoading = true;
      searchSpecialIncomeDetails({
        filters: filters,
        sorts: (isEmpty(this.sortProp) ? '-modifyDate' : (this.sortOrder === 'ascending' ? '+' : '-') + this.sortProp),
        size: this.pageSize,
        page: this.currentPage
      }).then((res) => {
        this.extractListLoading = false;
        if (res.data.successFlg) {
          this.tableData = res.data.detailModelList;
          this.currentPage = res.data.currPage;
          this.total = res.data.totalCount;
          this.pageSize = res.data.pageSize;
        }
      }).catch(function (error) {
        this.extractListLoading = false;
        this.$message.error('查询列表失败:' + error);
      });
    },
    searchSumSingleSpecialIncome () {
      searchSumSingle({specialIncomeId: this.specialIncomeInfo.specialIncomeId}).then((res) => {
        if (res.data.successFlg) {
          let info = res.data.obj;
          this.specialIncomeInfo.specialIncomeId = info.id;
          this.specialIncomeInfo.specialOrgName = info.specialOrgName;
          this.specialIncomeInfo.totalIncome = info.totalIncome || 0;
          this.specialIncomeInfo.totalExtractIncome = info.totalExtractIncome || 0;
          this.specialIncomeInfo.totalSurplusIncome = info.totalSurplusIncome || 0;
          this.findSpecialIncomeDetailList();
        }
      });
    },
    orderSelectDialog (val) {
      this.orderSelect = true;
      this.orderSelectForm = val;
    },
    reset () {
      resetObjNull(this.searchForm);
    }
  },
  // 初始化数据
  mounted () {
    this.init();
    this.$store.commit('initDict');
  }
};
</script>
